<template>
  <rx-layout>
    <div slot="left">
      <rx-tree
        showLine
        ref="rxTree"
        url="/api-system/system/core/sysTransferSetting/jsonAll"
        @select="selectTransfer"
      />
    </div>
    <div slot="center">
      <rx-fit>
        <div slot="toolheader" foldheader="true" foldbtn="true" border="false">
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-item :label="i18n('form.transferor','权限转移人') + ':'">
                    <rx-input-button ref="userIdEditA" @click="selectUser"></rx-input-button>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="i18n('form.transfer','转移到：')">
                    <rx-input-button ref="userIdEditB" @click="selectUser"></rx-input-button>
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button @click="onOk" type="primary">{{$ti18('rxForm.okBtn','确定')}}</a-button>
              </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
        <a-tabs v-model="activeKey" type="editable-card" @edit="editPane">
          <a-tab-pane v-for="pane in panes" :tab="pane.title" :key="pane.key" forceRender>
            <rx-grid
              :ref="'table_'+pane.key"
              :allowRowSelect="true"
              :multiSelect="true"
              :columns="pane.columns"
              :url="pane.url"
              data-field="result.data"
            >
            </rx-grid>
          </a-tab-pane>
        </a-tabs>
      </rx-fit>
    </div>
  </rx-layout>
</template>

<script>
  import {RxLayout, RxFit, Dialog, RxInputButton} from "@lowcode/jpaas-common-lib"
  import SysTransferSettingApi from "@/api/system/core/sysTransferSetting"

  export default {
    name: "SysTransferSettingMgr",
    components: {
      RxLayout,
      RxFit,
      RxInputButton
    },
    data() {
      return {
        activeKey: "",
        panes: []
      }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"SysTransferSetting",key);
        },
      editPane(targetKey, action) {
        if (action == 'remove') {
          for (var i = 0; i < this.panes.length; i++) {
            var pane = this.panes[i];
            if (pane.key == targetKey) {
              this.panes.splice(i, 1);
            }
          }
        }
      },
      selectTransfer(selectedKeys, info) {
        var id = selectedKeys[0];
        if (!id) return;
        var authorId = this.$refs["userIdEditA"].getVal().value;
        if (!authorId) {
          this.$message.error(this.i18n('msa.selectPerson','请选择权限转移人'));
          return;
        }
        SysTransferSettingApi.excuteSelectSql(id, authorId).then(json => {
          if (json.columns.length <= 1) {
            this.$message.error(this.i18n('msa.noAuthority','此权限转移人没有可转移的权限'));
            return;
          }
          for (var i = 0; i < this.panes.length; i++) {
            var pane = this.panes[i];
            if (json.id == pane.key) {
              this.$refs['table_' + pane.key][0].loadData();
              this.activeKey = pane.key;
              return;
            }
          }
          let _colArr = [];
          let _column =[...json.columns];
          for(let item of _column){
              let _obj = {...item} ;
              _obj.width = Number(_obj.width);
              _colArr.push(_obj);
          }
          this.panes.push({
            title: json.name,
            key: json.id,
            columns: _colArr,
            setId: id,
            url: '/api-system/system/core/sysTransferSetting/excuteSelectSqlData?id=' + id + '&authorId=' + authorId
          });
          this.activeKey = json.id;
        })
      },
      onOk() {
        var authorId = this.$refs["userIdEditA"].getVal().value;
        if (!authorId) {
          this.$message.error(this.i18n('msa.selectPerson','请选择权限转移人'));
          return;
        }
        var targetAuthorId = this.$refs["userIdEditB"].getVal().value;
        if (!targetAuthorId) {
          this.$message.error(this.i18n('msa.selectTarget','请选择目标人'));
          return;
        }

        var setId;
        for (var i = 0; i < this.panes.length; i++) {
          var pane = this.panes[i];
          if (this.activeKey == pane.key) {
            setId = pane.setId;
            break;
          }
        }
        if (!setId) {
          this.$message.error(this.i18n('msa.selectType','请选择要转移的权限类型'));
          return;
        }
        var table = this.$refs['table_' + this.activeKey][0];
        var rows = table.getSelectedRows();
        if (!rows || rows.length == 0) {
          this.$message.error(this.i18n('msa.permiss','请选择要转移的权限'));
          return;
        }

        SysTransferSettingApi.excuteUpdateSql({
          id: setId, authorId: authorId, targetPersonId: targetAuthorId, selectedItem: JSON.stringify(rows)
        }).then(res => {
          table.loadData();
        })
      },
      selectUser(vm) {
        Dialog.openUserDialog({
          curVm: this, data: {single: true}, widthHeight: ['1300px', '600px']
        }, function (self, data) {
          vm.setVal(data.userId, data.fullName);
        })
      }
    }
  }
</script>

<style scoped>

</style>